<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <!-- MOTW-DISABLED saved from url=(0014)about:internet -->
    <title>Format the report</title>
    <link rel="StyleSheet" href="css/getstarted.css" type="text/css" media="all" />
    <link rel="StyleSheet" href="css/webworks.css" type="text/css" media="all" />
    <link rel="StyleSheet" href="webworks.css" type="text/css" media="all" />
    <script type="text/javascript" language="JavaScript1.2">
      <!--
        var  WebWorksRootPath = "";
      // -->
    </script>
  </head>
  <body>
    <div style="text-align: left;">
      <table cellspacing="0" summary="">
        <tr>
          <td>
            <a href="gs-TutT6SortTheData.html"><img src="images/prev.gif" alt="Previous" border="0" /></a>
          </td>
          <td>
            <a href="gs-TutT8CreateAReportTitle.html"><img src="images/next.gif" alt="Next" border="0" /></a>
          </td>
        </tr>
      </table>
    </div>
    <hr align="left" />
    <blockquote>
      <h3 class="N_TutorialTask">Task 7:&nbsp;&nbsp;<a name="344905">Format the report</a></h3>
      <p class="b_Body"><a name="138863">Now that you verified that the report displays the correct data in the correct order, you can turn your attention to improving the report’s appearance. You perform the following tasks in this section:</a></p>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138864">Edit the text of the column headings.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138865">Format the column headings.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138866">Display the contact first and last names on the same line.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138867">Increase the space between rows.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <h4 class="N_h3_Head3"><a name="138870">Edit the column headings</a></h4>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138871">Choose Layout to return to the layout editor.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138872">Double-click the first column heading, CUSTOMERNAME. The column heading is in the first row—the header row—of the table.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138877">To replace all the highlighted text, start typing, then press Enter when you finish. To edit the text, click once to deselect the text, then position the cursor where you want to add or delete characters.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i_Indent1"><a name="138878">Replace CUSTOMERNAME with the following text:</a></div>
      <div class="cfi_CodeFirstIndent"><a name="138879">Customer</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138880">Repeat steps </a><a href="#138872" title="Format the report">2</a> and <a href="#138877" title="Format the report">3</a> to change the second and third column headings to the following text:</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="cfi_CodeFirstIndent"><a name="178175">Phone</a></div>
      <div class="coi_CodeIndent"><a name="344772">Contact</a></div>
      <div class="N_i_Indent1"><a name="344776">The report design should look like the one shown in </a><a href="#191409" title="Format the report">Figure&nbsp;1-23</a>.</div>
      <p class="i2_Image2"><a name="344780"><img class="Default" src="images/layout4.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-23 Revised column headings in a report design" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-23&nbsp;&nbsp;</b><a name="191409">Revised column headings in a report design</a></div>
      <h4 class="N_h3_Head3"><a name="138890">Format the column headings</a></h4>
      <p class="b1i_Bullet1-intro"><a name="138894">To format a report element, set its properties in one of the following two ways:</a></p>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138895">Set an element’s properties through Property Editor. Use this method to format only the selected element.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b1_Bullet1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b1_Bullet1_inner" style="width: 14.1732pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b1_Bullet1_inner"><a name="138896">Define a style that contains the desired properties, and apply the style to an element. Use this method to define format properties once and apply them to more than one element.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <p class="b_Body"><a name="396049">You might notice that in the report design, the column headings appear in plain text and are center-aligned. The generated HTML report, however, displays the column headings in bold and centered. This discrepancy occurs because BIRT uses the browser’s default format for items placed in a table header.</a></p>
      <p class="b_Body"><a name="319456">In this procedure, you use the Property Editor to align the column headings to the left, and you define a style to add color to the header row.</a></p>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="285150">To format the column headings using Property Editor:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="286589">Select all the column headings. To select multiple elements, press and hold the Shift key as you click each element. Property Editor displays the properties for the selected elements, as shown in </a><a href="#286598" title="Format the report">Figure&nbsp;1-24</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="286596"><img class="Default" src="images/layout5_print.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-24 Properties for selected elements in Property Editor" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;1-24&nbsp;&nbsp;</b><a name="286598">Properties for selected elements in Property Editor</a></div>
      <p class="N_si_ScanIcon"><a name="319500"><img class="Default" src="images/left_button.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Left button" /></a></p>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="319514">Choose the Left button to align the column headings to the left.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <p class="N_si_ScanIcon"><a name="142154"><img class="Default" src="images/bold_button.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Bold button" /></a></p>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="142155">Choose the B button to format the column headings as bold text.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138915">Deselect the column headings by clicking the white space outside the table.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138919">To add a background color to the header row, using a style:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="290531">From the main menu bar, choose Element</a><span class="Dingbat">&rarr;</span>Style<span class="Dingbat">&rarr;</span>New Style.</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i2_Indent2"><a name="345619">New Style appears, as shown in </a><a href="#345625" title="Format the report">Figure&nbsp;1-25</a>. The left side displays the property categories. The right side displays the properties for the category that you select.</div>
      <p class="i3_Image3"><a name="345623"><img class="Default" src="images/newstyle.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-25 New Style" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;1-25&nbsp;&nbsp;</b><a name="345625">New Style</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138933">For Custom Style, type the following name for the style:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="cfi2_CodeFirstIndent2"><a name="138934">table_header_row</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138935">Choose Background from the list of property categories. New Style displays the background properties that you can set.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138938">Specify a color for the Background Color property, using one of the following methods:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b3_Bullet3_outer" style="margin-left: 28.3464pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b3_Bullet3_inner" style="width: 14.173199999999997pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b3_Bullet3_inner"><a name="138939">Select the button next to the property, then select a color from the color palette that appears.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="b3_Bullet3_outer" style="margin-left: 28.3464pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="b3_Bullet3_inner" style="width: 14.173199999999997pt; white-space: nowrap">
                <img src="Bullet.png" alt="*" border="0" width="6" height="6" />
              </div>
            </td>
            <td width="100%">
              <div class="b3_Bullet3_inner"><a name="138940">Select a color from the drop-down list.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i2_Indent2"><a name="138941">Choose OK.</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">5&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="459025">In the layout editor, select the table. Selecting the table causes guide cells to appear at the top and left side of the table, as shown in </a><a href="#459046" title="Format the report">Figure&nbsp;1-26</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="459044"><img class="Default" src="images/getstarted.01.10.06.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-26 Guide cells at top and left of a table" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;1-26&nbsp;&nbsp;</b><a name="459046">Guide cells at the top and left of a table</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">6&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138951">Select the guide cell next to the header row.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">7&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138954">In Property Editor, choose Properties, then choose General to display the general properties for the row.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">8&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="138955">Apply the style that you just created by selecting table_header_row from the drop-down list next to Style. BIRT Report Designer applies the style to the header row and it appears in color.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="191542">Preview the report. The report should look like the one shown in </a><a href="#425456" title="Format the report">Figure&nbsp;1-27</a>. </div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="191550"><img class="Default" src="images/output2.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-27 Report preview showing header row style" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-27&nbsp;&nbsp;</b><a name="425456">Report preview showing header row style</a></div>
      <h4 class="N_h3_Head3"><a name="425460">Display first and last names on the same line</a></h4>
      <p class="b_Body"><a name="242268">When you place multiple elements in a single cell, BIRT Report Designer creates block-level elements. If you are familiar with HTML, you know that each block element starts on a new line. To display multiple elements on the same line, you need to set them as inline elements. Alternatively, you can concatenate the first and last name values to display in a single data element, as described in this procedure.</a></p>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138982">Choose Layout to return to the layout editor.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138983">Delete the data element that displays [CONTACTLASTNAME].</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138984">Double-click the data element that displays [CONTACTFIRSTNAME].</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i_Indent1"><a name="138985">Edit Data Binding, shown in </a><a href="#425510" title="Format the report">Figure&nbsp;1-28</a>, shows information about the data associated with the current data element. In Expression, dataSetRow["CONTACTFIRSTNAME"] indicates that the data element displays data from the CONTACTFIRSTNAME field in the data set.</div>
      <p class="i2_Image2"><a name="257009"><img class="Default" src="images/editdatabinding.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-28 Edit Data Binding" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-28&nbsp;&nbsp;</b><a name="425510">Edit Data Binding</a></div>
      <p class="N_si_ScanIcon"><a name="425515"><img class="Default" src="images/expressionbldrbutton.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Expression Builder button" /></a></p>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="186768">Click the expression builder button next to the Expression field.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i_Indent1"><a name="186767">The expression builder displays the expression in the text area at the top of the window.</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">5&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="138986">To concatenate the first and last names, edit the expression as follows:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="cfi_CodeFirstIndent"><a name="345047">dataSetRow["CONTACTFIRSTNAME"] + " " + dataSetRow["CONTACTLASTNAME"]</a></div>
      <div class="N_i_Indent1"><a href="#230437" title="Format the report" name="345189">Figure&nbsp;1-29</a> shows this expression in the expression builder. The empty quotation marks ("&nbsp;") add a space between the first name and last name. You can type the expression in the text area or double-click an item in the lower right of the window to insert it in the expression.</div>
      <p class="i2_Image2"><a name="345079"><img class="Default" src="images/getstarted.01.10.10.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-29 The expression builder displaying the expression to concatenate data" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-29&nbsp;&nbsp;</b><a name="230437">The expression builder displaying the expression to concatenate data</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">6&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="139000">Choose OK to close the expression builder.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i_Indent1"><a name="257057">The edited expression appears in Edit Data Binding. </a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">7&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="345632">Choose OK to save the changes to the data element.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">8&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="139001">Preview the report. The report should look like the one shown in </a><a href="#208254" title="Format the report">Figure&nbsp;1-30</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="208252"><img class="Default" src="images/output3.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-30 Report preview showing concatenated contact names" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-30&nbsp;&nbsp;</b><a name="208254">Report preview showing concatenated contact names</a></div>
      <h4 class="N_h3_Head3"><a name="208256">Increase the space between rows</a></h4>
      <p class="b_Body"><a name="139010">The default layout adds a minimum space between table rows. Typically, you will want to adjust the spacing between rows.</a></p>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="139011">Choose Layout to return to the layout editor.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="257069">Select the table’s detail row, the middle row, as shown in </a><a href="#257084" title="Format the report">Figure&nbsp;1-31</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="257070"><img class="Default" src="images/selected_row.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-31 Selected table row in the layout editor" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-31&nbsp;&nbsp;</b><a name="257084">Selected table row in the layout editor</a></div>
      <div class="N_i_Indent1"><a name="319646">Property Editor displays the properties for the row. The title that appears in Property Editor shows the type of element that you select, so you should see Property Editor—Row.</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="257093">In the General properties, set Height to 24 points. The height of the row increases, as shown in </a><a href="#257104" title="Format the report">Figure&nbsp;1-32</a>. </div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="257097"><img class="Default" src="images/setrowheight_qs.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-32 Row height set to 24 points" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-32&nbsp;&nbsp;</b><a name="257104">Row height set to 24 points</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732pt; white-space: nowrap">
                <span class="zAuto_0023Format">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="139030">Preview the report. The report should look like the one shown in </a><a href="#191472" title="Format the report">Figure&nbsp;1-33</a>. There is more space between the rows of data.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="139034"><img class="Default" src="images/output4.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 1-33 Report preview showing increased row spacing" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;1-33&nbsp;&nbsp;</b><a name="191472">Report preview showing increased row spacing</a></div>
    </blockquote>
    <hr align="left" />
    <table align="right" summary="">
      <tr>
        <td class="WebWorks_Company_Name_Bottom">
          <a href="notices.html">(c) Copyright Actuate Corporation 2013</a>
        </td>
      </tr>
    </table>
  </body>
</html>